<template>
  <div>
    <div v-if="this.experience[0]||this.activity[0]||this.prize[0]||this.skill[0]||this.paper[0]">
      <div class="head">
        <img class="img"
             src="../../assets/index/tag.png"
             alt="" />
        其它信息
      </div>
    </div>
    <div v-if="this.experience[0]">
      <div class="experience_info_title">实习经历</div>
      <div class="experience_info"
           v-for="(item, index) in experience"
           :key="index">
        <div>
          <el-dialog title="修改择校信息"
                     :visible.sync="dialogVisible"
                     width="60%"
                     @close="closeFun()">
            <!-- <div v-for="(item,index) in formInline_experience" :key='index'>  -->
            <el-form :inline="true"
                     label-width="120px">
              <el-form-item class="el-form-item"
                            label="岗位名称:">
                <el-input class="el-input"
                          v-model.trim="formInline_experience[tab].jobName"
                          placeholder="请输入岗位名称"></el-input>
              </el-form-item>
              <el-form-item label="实习公司名称:">
                <el-input class="el-input"
                          v-model.trim="formInline_experience[tab].jobCompany"
                          placeholder="请输入实习公司名称">
                </el-input>
              </el-form-item>
              <el-form-item label="就职起止时间:">
                <el-date-picker v-model="formInline_experience[tab].startTime"
                                format="yyyy/MM/dd"
                                value-format="yyyy/MM/dd"
                                :editable="false"
                                placeholder="选择日期">
                </el-date-picker>
                -
                <el-date-picker v-model="formInline_experience[tab].endTime"
                                format="yyyy/MM/dd"
                                value-format="yyyy/MM/dd"
                                :editable="false"
                                placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="单位所在地:">
                <el-input class="el-input"
                          v-model.trim="formInline_experience[tab].jobAddress"
                          placeholder="请输入单位所在地">
                </el-input>
              </el-form-item>
              <el-form-item label="职位概述:">
                <el-input class="el-input"
                          v-model.trim="formInline_experience[tab].describes"
                          placeholder="请输入职位概述">
                </el-input>
              </el-form-item>
            </el-form>
            <!-- </div> -->
            <span slot="footer"
                  class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary"
                         @click="commitExperienceInfo">确 定</el-button>
            </span>
          </el-dialog>
        </div>
        <div class="experience">
          <div class="experience_lf">
            <p>
              岗位名称：{{ item.jobName }}
              <img class="edit_experience"
                   @click="getExperienceIndex(index)"
                   src="../../assets/index/edit.png"
                   alt="" />
            </p>

            <p>就职起止时间：{{ item.startTime }}-{{ item.endTime }}</p>
          </div>
          <div class="experience_rf">
            <p>实习公司名称：{{ item.jobCompany }}</p>
            <p>单位所在地：{{ item.jobAddress }}</p>
          </div>
        </div>
        <div class="experience_info_details">
          职业概述：{{ item.describes }}
        </div>
      </div>
    </div>
    <div v-if="this.activity[0]">
      <div class="experience_info_title">课外活动</div>
      <div class="experience_info"
           v-for="(item, index) in activity"
           :key="index">
        <div class="experience">
          <div class="experience_lf">
            <p>
              活动名称：{{ item.activeName }}
              <img class="edit_experience"
                   @click="getActivityIndex(index)"
                   src="../../assets/index/edit.png"
                   alt="" />
              <el-dialog title="添加/修改课外活动"
                         :visible.sync="dialog2Visible"
                         width="60%"
                         @close="closeFun()">
                <el-form :inline="true"
                         label-width="120px">
                  <el-form-item class="el-form-item"
                                label="活动名称:">
                    <el-input class="el-input"
                              v-model.trim="formInline_activity[tab2].activeName"
                              placeholder="请输入活动名称"></el-input>
                  </el-form-item>
                  <el-form-item class="el-form-item"
                                label="活动起止时间:">
                    <el-date-picker v-model="formInline_activity[tab2].startTime"
                                    format="yyyy/MM/dd"
                                    value-format="yyyy/MM/dd"
                                    :editable="false"
                                    placeholder="选择日期">
                    </el-date-picker>
                    -
                    <el-date-picker v-model="formInline_activity[tab2].endTime"
                                    format="yyyy/MM/dd"
                                    value-format="yyyy/MM/dd"
                                    :editable="false"
                                    placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item class="el-form-item"
                                label="活动概述:">
                    <el-input class="el-input"
                              v-model.trim="formInline_activity[tab2].describes"
                              placeholder="请输入活动概述"></el-input>
                  </el-form-item>
                </el-form>
                <span slot="footer"
                      class="dialog-footer">
                  <el-button @click="dialog2Visible = false">取 消</el-button>
                  <el-button type="primary"
                             @click="commitActivityInfo">确 定</el-button>
                </span>
              </el-dialog>
            </p>
          </div>
          <div class="experience_rf">
            <p>就职起止时间：{{ item.startTime }}-{{ item.endTime }}</p>
          </div>
        </div>
        <div class="experience_info_details">
          活动概述：{{ item.describes }}
        </div>
      </div>
    </div>
    <div v-if="this.prize[0]">
      <div class="experience_info_title">奖项</div>
      <div class="experience_info"
           v-for="(item, index) in prize"
           :key="index">
        <div class="experience">
          <div class="experience_lf">
            <p>
              奖项名称：{{ item.prizeName }}
              <img class="edit_experience"
                   @click="getPrizeIndex(index)"
                   src="../../assets/index/edit.png"
                   alt="" />
              <el-dialog title="添加/修改奖项"
                         :visible.sync="dialog3Visible"
                         width="60%"
                         @close="closeFun()">
                <el-form :inline="true"
                         label-width="120px">
                  <el-form-item class="el-form-item"
                                label="奖项名称:">
                    <el-input class="el-input"
                              v-model.trim="formInline_prize[tab3].prizeName"
                              placeholder="请输入奖项名称"></el-input>
                  </el-form-item>
                  <el-form-item class="el-form-item"
                                label="获奖时间:">
                    <el-date-picker v-model="formInline_prize[tab3].time"
                                    format="yyyy/MM/dd"
                                    value-format="yyyy/MM/dd"
                                    :editable="false"
                                    placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </el-form>
                <span slot="footer"
                      class="dialog-footer">
                  <el-button @click="dialog3Visible = false">取 消</el-button>
                  <el-button type="primary"
                             @click="commitPrizeInfo">确 定</el-button>
                </span>
              </el-dialog>
            </p>
          </div>
          <div class="experience_rf">
            <p>获奖时间：{{ item.time }}</p>
          </div>
        </div>
      </div>
    </div>

    <div v-if="this.formInline_skill[0]">
      <div class="experience_info_title"
           @click="check">
        技能
        <img class="edit_experience"
             @click="dialog4Visible = true"
             src="../../assets/index/edit.png"
             alt="" />
        <el-dialog title="添加/修改技能信息"
                   :visible.sync="dialog4Visible"
                   width="60%"
                   @close="closeFun()">
          <div v-for="(item, index) in formInline_skill"
               :key="index">
            <el-form ref="item"
                     :model="item"
                     :inline="true"
                     label-width="80px">
              <el-form-item class="el-form-item"
                            label="技能名称:">
                <el-input class="el-input"
                          v-model.trim="item.skill"
                          placeholder="请输入技能名称"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer"
                class="dialog-footer">
            <el-button @click="dialog4Visible = false">取 消</el-button>
            <el-button type="primary"
                       @click="commitSkillInfo">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <div class="skill">
        <div class="skill_info"
             v-for="(item, index) in skill"
             :key="index">
          {{ item.skill }}
        </div>
      </div>
    </div>
    <div v-if="this.paper[0]">
      <div class="experience_info_title">论文发表</div>
      <div class="experience_info"
           v-for="(item, index) in paper"
           :key="index">
        <div class="experience">
          <div class="experience_lf">
            <p>
              论文名称：{{ item.paperName }}
              <img class="edit_experience"
                   @click="getPaperIndex(index)"
                   src="../../assets/index/edit.png"
                   alt="" />
              <el-dialog title="添加/修改论文发表信息"
                         :visible.sync="dialog5Visible"
                         width="60%"
                         @close="closeFun()">
                <el-form :inline="true"
                         label-width="120px">
                  <el-form-item class="el-form-item"
                                label="论文名称:">
                    <el-input class="el-input"
                              v-model.trim="formInline_paper[tab4].paperName"
                              placeholder="请输入论文名称"></el-input>
                  </el-form-item>
                  <el-form-item class="el-form-item"
                                label="发表刊物名称:">
                    <el-input class="el-input"
                              v-model.trim="formInline_paper[tab4].paperPublication"
                              placeholder="请输入发表刊物名称"></el-input>
                  </el-form-item>
                  <el-form-item class="el-form-item"
                                label="发表时间:">
                    <el-date-picker v-model="formInline_paper[tab4].paperTime"
                                    format="yyyy/MM/dd"
                                    value-format="yyyy/MM/dd"
                                    :editable="false"
                                    placeholder="选择日期"> 
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item class="el-form-item"
                                label="作者信息:">
                    <el-input class="el-input"
                              v-model.trim="formInline_paper[tab4].paperAuthor"
                              placeholder="请输入作者信息"></el-input>
                  </el-form-item>
                </el-form>
                <span slot="footer"
                      class="dialog-footer">
                  <el-button @click="dialog5Visible = false">取 消</el-button>
                  <el-button type="primary"
                             @click="commitPaperInfo">确 定</el-button>
                </span>
              </el-dialog>
            </p>
            <p>发表时间：{{ item.paperTime }}</p>
          </div>
          <div class="experience_rf">
            <p>发表刊物名称：{{ item.paperPublication }}</p>
            <p>作者信息：{{ item.paperAuthor }}</p>
          </div>
        </div>
      </div>
    </div>
    <div v-if="recommender[0]">
      <div class="head">
        <img class="img"
             src="../../assets/index/tag.png"
             alt="" />
        推荐人信息
      </div>
      <div class="recommender_info"
           v-for="(item, index) in recommender"
           :key="index">
        <div class="recommender_info_lf">
          <p class="title">
            第{{ number[index] }}推荐人
            <img class="edit_recommender"
                 @click="getRecommenderIndex(index)"
                 src="../../assets/index/edit.png"
                 alt="" />
            <el-dialog title="添加/修改推荐人信息"
                       :visible.sync="dialog6Visible"
                       width="60%"
                       @close="closeFun()">
              <el-form :inline="true"
                       label-width="120px">
                <el-form-item class="el-form-item"
                              label="推荐人姓名:">
                  <el-input class="el-input"
                            v-model.trim="formInline_recommender[tab5].referenceName"
                            placeholder="请输入推荐人姓名"></el-input>
                </el-form-item>
                <el-form-item class="el-form-item"
                              label="推荐人职位:">
                  <el-input class="el-input"
                            v-model.trim="formInline_recommender[tab5].referenceJob"
                            placeholder="请输入推荐人职位"></el-input>
                </el-form-item>
                <el-form-item class="el-form-item"
                              label="推荐人职责:">
                  <el-input class="el-input"
                            v-model.trim="formInline_recommender[tab5].referenceCourse"
                            placeholder="请输入推荐人职责"></el-input>
                </el-form-item>
                <el-form-item class="el-form-item"
                              label="与学生关系:">
                  <el-input class="el-input"
                            v-model.trim="formInline_recommender[tab5].referenceRelationship"
                            placeholder="请输入与学生关系"></el-input>
                </el-form-item>
                <el-form-item class="el-form-item"
                              label="联系电话:">
                  <el-input class="el-input"
                            v-model.trim="formInline_recommender[tab5].phone"
                            placeholder="请输入联系电话"></el-input>
                </el-form-item>
                <el-form-item class="el-form-item"
                              label="联系邮箱:">
                  <el-input class="el-input"
                            v-model.trim="formInline_recommender[tab5].email"
                            placeholder="请输入联系邮箱"></el-input>
                </el-form-item>
                <el-form-item class="el-form-item"
                              label="所在单位:">
                  <el-input class="el-input"
                            v-model.trim="formInline_recommender[tab5].unit"
                            placeholder="请输入所在单位"></el-input>
                </el-form-item>
                <el-form-item class="el-form-item"
                              label="详细地址:">
                  <el-input class="el-input"
                            v-model.trim="formInline_recommender[tab5].address"
                            placeholder="请输入详细地址"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer"
                    class="dialog-footer">
                <el-button @click="dialog6Visible = false">取 消</el-button>
                <el-button type="primary"
                           @click="commitReferenceInfo(tab5)">确 定</el-button>
              </span>
            </el-dialog>
          </p>
          <p>推荐人姓名：{{ item.referenceName }}</p>
          <p>推荐人职责：{{ item.referenceCourse }}</p>
          <p>联系电话：{{ item.phone }}</p>
          <p>所在单位：{{ item.unit }}</p>
        </div>
        <div class="recommender_info_rf">
          <p>推荐人职位：{{ item.referenceJob }}</p>
          <p>与学生关系：{{ item.referenceRelationship }}</p>
          <p>联系邮箱：{{ item.email }}</p>
          <p>详细地址：{{ item.address }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import search from "../../component/search/search.vue";
import paging from "../../component/paging/paging.vue";
import {
  getRecommenderInfo, //推荐人信息
  getExperienceInfo, //其他信息-实习经历
  getActivityInfo, //其他信息-活动
  getSkillInfo, //其他信息-技能
  getPrizeInfo, //其他信息-奖项
  getPaperInfo, //其他信息-论文
  updateOrderJob, //更新实习经历
  updateOrderActive, //更新活动
  updataOrderPrize, //更新奖项
  updataOrderPaper,//更新论文
  updateReference,//更新推荐人
  updataOrderSkill,//更新技能
} from '../../../src/api/index'
export default {
  mounted () {
    this.getList()
  },
  components: {
    search, //筛选查询组件
    paging, //分页组件
  },
  data () {
    return {
      current: "",
      pagesize: "",
      total: 0, //一共多少条数据
      tab: 0, //实习经历下标索引
      tab2: 0, //课外活动下标索引
      tab3: 0, //奖项下标索引
      tab4: 0, //论文发表下标索引
      tab5: 0, //推荐人信息下标索引
      value1: "",
      startTime: null,
      endTime: null,
      dialogVisible: false, //点击弹出编辑框
      dialog2Visible: false,
      dialog3Visible: false,
      dialog4Visible: false,
      dialog5Visible: false,
      dialog6Visible: false,
      recommender: [], //推荐人信息
      experience: [], //其他信息-实习经历
      activity: [], //其他信息-活动
      skill: [], //其他信息-技能
      prize: [], //其他信息-奖项
      paper: [], //其他信息-论文
      number: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"],
      formInline_experience: [],
      // formInline_experience: {
      //   jobName: '',
      //   jobCompany: '',
      //   startTime: '',
      //   endTime: '',
      //   jobAddress: '',
      //   gradescribespe: ''
      // },
      formInline_activity: [],
      // {
      //   activeName: '',
      //   startTime: '',
      //   endTime: '',
      //   describes: '',
      // },
      formInline_prize: [],
      // {
      //   prizeName: '',
      //   time: '',
      // },
      formInline_skill: [],
      // formInline_skill: {
      //   skill: ''
      // }
      formInline_paper: [],
      //  {
      //   paperAuthor: '',
      //   paperName: '',
      //   paperPublication: '',
      //   paperTime: '',
      // },
      formInline_recommender: [],
      //  {
      //   referenceName: '',
      //   referenceJob: '',
      //   referenceCourse: '',
      //   referenceRelationship: '',
      //   phone: '',
      //   email: '',
      //   unit: '',
      //   address: '',
      // },
    };
  },
  methods: {
    check () {
      console.log(this.formInline_skill)
      console.log(this.skill)
    },
    closeFun () {
      //重置form表单
      this.getList();
      // this.$refs['formInline_skill'].resetFields();
      // this.$refs['multipleTable'].clearSelection();
    },
    currentpage (val) {
      // console.log(val);
      this.current = val; //得到新的当前页
      this.getList(); //获取新的数据列表
    },
    size (val) {
      // console.log(val);
      this.pagesize = val; //得到新当前页的一共几行数据
      this.getList(); //获取新的数据列表
    },
    getExperienceIndex (val) {
      console.log(val)
      this.tab = val
      this.dialogVisible = true
    },
    getActivityIndex (val) {
      console.log(val)
      this.tab2 = val
      this.dialog2Visible = true
    },
    getPrizeIndex (val) {
      console.log(val)
      this.tab3 = val
      this.dialog3Visible = true
    },
    getPaperIndex (val) {
      console.log(val)
      this.tab4 = val
      this.dialog5Visible = true
    },
    getRecommenderIndex (val) {
      console.log(val)
      this.tab5 = val
      this.dialog6Visible = true
      console.log(this.formInline_recommender);
    },
    // getExperienceStartTime(val) {
    //   // console.log(val)
    //   this.startTime = JSON.parse(JSON.stringify(val))
    // },
    // getExperienceEndTime(val) {
    //   // console.log(val)
    //   this.endTime = JSON.parse(JSON.stringify(val))
    // },
    commitSkillInfo () {
      this.dialog4Visible = false
      console.log(this.formInline_skill);
      let newlist = []
      this.formInline_skill.forEach((item) => {
        newlist.push(item.skill)
      })
      newlist = newlist.join(',');
      console.log(newlist);
      updataOrderSkill(
        newlist,
        window.sessionStorage.getItem('orderId'),
      ).then((data) => {
        console.log(data)
        this.getList()
      })
      console.log(this.formInline_skill);
    },
    commitReferenceInfo (val) {
      this.dialog6Visible = false
      updateReference(
        this.formInline_recommender[val].address,
        this.formInline_recommender[val].email, 
        window.sessionStorage.getItem('orderId'), 
        this.formInline_recommender[val].phone, 
        this.formInline_recommender[val].referenceCourse, 
        this.formInline_recommender[val].referenceId,
        this.formInline_recommender[val].referenceJob, 
        this.formInline_recommender[val].referenceName, 
        this.formInline_recommender[val].referenceRelationship, 
        this.formInline_recommender[val].unit
      ).then((data) => {
        console.log(data)
        this.getList()
      })
    },
    commitPaperInfo () {
      this.dialog5Visible = false
      updataOrderPaper(
        window.sessionStorage.getItem("orderId"),
        this.formInline_paper[this.tab4].paperAuthor,
        this.tab4 + 1,
        this.formInline_paper[this.tab4].paperName,
        this.formInline_paper[this.tab4].paperPublication,
        this.formInline_paper[this.tab4].paperTime
      ).then((data) => {
        console.log(data);
        this.getList();
      });
    },
    commitPrizeInfo () {
      this.dialog3Visible = false
      updataOrderPrize(
        window.sessionStorage.getItem("orderId"),
        this.tab3 + 1,
        this.formInline_prize[this.tab3].prizeName,
        this.formInline_prize[this.tab3].time
      ).then((data) => {
        console.log(data);
        this.getList();
      });
    },
    commitActivityInfo () {
      this.dialog2Visible = false
      updateOrderActive(
        this.tab2 + 1,
        this.formInline_activity[this.tab2].activeName,
        this.formInline_activity[this.tab2].describes,
        this.formInline_activity[this.tab2].endTime,
        window.sessionStorage.getItem("orderId"),
        this.formInline_activity[this.tab2].startTime
      ).then((data) => {
        console.log(data);
        this.getList();
      });
    },
    commitExperienceInfo () {
      this.dialogVisible = false
      updateOrderJob(
        this.formInline_experience[this.tab].describes,
        this.formInline_experience[this.tab].endTime,
        this.formInline_experience[this.tab].jobAddress,
        this.formInline_experience[this.tab].jobCompany,
        this.tab + 1,
        this.formInline_experience[this.tab].jobName,
        window.sessionStorage.getItem("orderId"),
        this.formInline_experience[this.tab].startTime
      ).then((data) => {
        console.log(data);
        this.getList();
      });
    },
    getList () {
      //推荐人信息
      getRecommenderInfo(window.sessionStorage.getItem("orderId")).then(
        (data) => {
          // console.log(data)
          this.recommender = JSON.parse(JSON.stringify(data.data))
          this.formInline_recommender = JSON.parse(JSON.stringify(data.data))
          // console.log(this.recommender);
        }
      );
      //其他资料-实习经历
      getExperienceInfo(window.sessionStorage.getItem("orderId")).then(
        (data) => {
          // console.log(data)
          this.experience = JSON.parse(JSON.stringify(data.data));
          this.formInline_experience = JSON.parse(JSON.stringify(data.data));
          // console.log(this.experience)
        }
      );
      // 其他信息-活动
      getActivityInfo(window.sessionStorage.getItem("orderId")).then((data) => {
        // console.log(data)
        this.activity = JSON.parse(JSON.stringify(data.data));
        this.formInline_activity = JSON.parse(JSON.stringify(data.data));
        // console.log(this.formInline_activity);
      });
      // 其他信息-技能
      getSkillInfo(window.sessionStorage.getItem("orderId")).then((data) => {
        // console.log(data)
        this.skill = JSON.parse(JSON.stringify(data.data));
        this.formInline_skill = JSON.parse(JSON.stringify(data.data)); //深拷贝
        console.log(this.skill);
        // this.skill.forEach((item)=>{
        //   this.formInline_skill.push(item)
        // })
      });
      // 其他信息-奖项
      getPrizeInfo(window.sessionStorage.getItem("orderId")).then((data) => {
        // console.log(data)
        this.prize = JSON.parse(JSON.stringify(data.data));
        this.formInline_prize = JSON.parse(JSON.stringify(data.data));
        // console.log(this.formInline_prize)
      });
      // 其他信息-论文
      getPaperInfo(window.sessionStorage.getItem("orderId")).then((data) => {
        // console.log(data)
        this.paper = JSON.parse(JSON.stringify(data.data));
        this.formInline_paper = JSON.parse(JSON.stringify(data.data));
        console.log(this.formInline_paper);
      });
    },
  },
};
</script>

<style>
.img {
  width: 15px;
  height: 15px;
  margin-top: 15px;
}
.head {
  height: 50px;
  padding-top: 20px;
  padding-left: 20px;
  color: #666666;
  font-size: 18px;
}
.essential-information {
  margin-top: 20px;
  margin-left: 20px;
}
.edit {
  width: 20px;
  height: 20px;
  padding-top: 20px;
  margin-left: 20px;
  cursor: pointer;
}
.edit_experience {
  width: 20px;
  height: 20px;
  margin-left: 20px;
  cursor: pointer;
}
.paging {
  margin-top: 15px;
  text-align: center;
}
.edit {
  width: 20px;
  height: 20px;
  padding-top: 20px;
  margin-left: 20px;
}
.edit_recommender {
  width: 20px;
  height: 20px;
  margin-left: 20px;
  cursor: pointer;
}

/* 推荐人信息样式 */
.recommender_info {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-left: 20px;
}
.title {
  font-weight: 600;
}
.recommender_info_lf {
  margin-left: 30px;
}
.recommender_info_lf p {
  width: 200px;
  margin: 20px 0;
}
.recommender_info_rf {
  margin-top: 40px;
}
.recommender_info_rf p {
  width: 200px;
  margin-top: 20px;
  margin-left: 100px;
  margin-right: 400px;
}
/* 推荐人信息样式 */
/* 其他信息 */
.experience_info {
  margin-top: 5px;
  margin-left: 50px;
}
.experience {
  display: flex;
  justify-content: space-between;
}
.experience_lf p {
  width: 300px;
  margin-top: 20px;
}
.experience_rf p {
  width: 400px;
  margin-top: 20px;
  margin-right: 400px;
}
.experience_info_details {
  margin-top: 20px;
}
.experience_info_title {
  font-weight: 600;
  margin-top: 20px;
  margin-left: 40px;
}
.skill {
  display: flex;
  margin-top: 20px;
  margin-left: 30px;
}
.skill_info {
  margin-left: 20px;
  /* justify-content: space-around; */
}
/* 其他信息 */
</style>
